<template>
  <div ref="barChartRef" class="container-bar-chart common-frame border" ></div>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import * as echarts from 'echarts';

  const barChartRef = ref(null);

  onMounted(()=>{
    const chartDom = barChartRef.value;
    const myChart = echarts.init(chartDom);
    const option = {
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {
        type: 'value'
      },
      series:[
        {
          data: [120, 200, 150, 80, 90],
          type: 'bar'
        }
      ]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

  });

</script>

<style scoped>
.container-bar-chart {
  display: flex;
  width: 100%;
  height: 500px;
}
</style>

<style>
@import "@/assets/styles/global.css";
</style>